

<template>
    <div class="person">
     ???
    </div>

</template>

<script setup lang="ts" name="Person">
// 引入person的规范
import {type Person, type persons} from '@/types';
// 声明了一个对象，这个对象要符合Person所定义的规范
let person:Person={id:"hjkhhkj01",name:"zhangsan",age:66}
console.log(person.name)

// 声明一个集合，集合中的每一个对象都要符合Person的规范
// let persons=Array<Person>(
//     {id:"jlkjlkjlkjlkj01",name:"lisi",age:25},
//     {id:"jlkjlkjlkjlkj02",name:"wangwu",age:26},
//     {id:"jlkjlkjlkjlkj03",name:"zhaoliu",age:45}
// )
// 创建一个集合类型的数据，需要指定集合中的泛型
// 可以直接在ts中进行指定,在声明对象时，直接指定泛型即可
let persons:persons=[
    {id:"jlkjlkjlkjlkj01",name:"lisi",age:25},
    {id:"jlkjlkjlkjlkj02",name:"wangwu",age:26},
    {id:"jlkjlkjlkjlkj03",name:"zhaoliu",age:45,hoby:"changge"}
]


</script>
<!-- 在style标签中，加上scoped属性，则表示当前的样式做作用于当前页面 -->
<style scoped>
.person{
    background-color: lightseagreen;
	box-shadow: 6px 6px 12px gray;
	border-radius: 6px;
	line-height: 40px;
	padding:10px;

}
</style>